<template>
	<view class="message-list">
		<scroll-view show-scrollbar="false" :style="{ height: winHeight + 'px' }" class="uni-indexed__list" scroll-y>
			<block v-for="(it,i) of messagesList" :key="i">
				<view class="uni-swipe-action" hover-class="uni-list-cell-hover">
					<view class="uni-swipe-action__container" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"
					 @touchcancel="touchEnd" :style="{'transform':messageIndex == i ? transformX : 'translateX(0px)','-webkit-transform':messageIndex == i ? transformX : 'translateX(0px)'}"
					 :data-index="i">
						<view class="uni-swipe-action__content " @click="toSesscton(it,it.type)">
							<view class="item no-border-bottom" :class="{'stick' : it.stick}">
								<block v-if="it.type == 1">
									<view class="item-left">
										<view class="avator">
											<view class="iconfont ic_system-news"></view>
										</view>
									</view>
									<view class="item-middle">
										<text class="title">{{it.title}}</text>
										<text class="message">{{it.message}}</text>
									</view>
									<view class="item-right">
										<view class="time">{{it.time}}</view>
										<view class="height-50">
											<view class="mark" v-if="it.count>0">{{it.count}}</view>
										</view>
									</view>
								</block>
								<block v-else>
									<view class="item-left">
										<avator-group :type="it.type" :avator="it.url"></avator-group>
									</view>
									<view class="item-middle">
										<text class="title">{{it.title}}</text>
										<text class="message">{{it.message}}</text>
									</view>
									<view class="item-right">
										<view class="time">{{it.time}}</view>
										<view class="height-50">
											<view class="mark" v-if="it.count>0">{{it.count}}</view>
										</view>
									</view>
								</block>
							</view>
						</view>
						<view class="uni-swipe-action__btn-group" :id="elId">
							<view v-for="(item,index) in options" :key="index" class="uni-swipe-action--btn" :style="{backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',color: item.style && item.style.color ? item.style.color : '#FFFFFF',fontSize: item.style && item.style.fontSize ? item.style.fontSize : '28upx'}"
							 @click="thatBindClickBtn(item,it,i)">
								{{item.text }}
							</view>
						</view>
					</view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	import avatorGroup from "./avator-group.vue"
	import config from '@/common/js/config.js'
	export default {
		name: 'wkiwi-swipe-action',
		props: {
			options: Array,
			messagesList: Array,
			toSesscton: Function,
		},
		components: {
			avatorGroup
		},
		data() {
			const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
			return {
				elId: elId,
				transformX: 'translateX(0px)',
				messageIndex: -1,
			}
		},
		created() {
			this.direction = ''
			this.startX = 0
			this.startY = 0
			this.btnGroupWidth = 0
			this.isMoving = false
			let winHeight = uni.getSystemInfoSync().windowHeight - 50;
			this.winHeight = winHeight;
		},
		// #ifdef H5
		mounted() {
			this.getSize()
		},
		// #endif
		// #ifndef H5
		onReady() {
			this.getSize()
		},
		// #endif
		methods: {
			thatBindClickBtn(btn, item, index) {
				try {
					const userProvider = uni.getStorageSync(config.Global.cache + '_UserProvider');
					var _this = this;
					this.messageIndex = -1;
					switch (btn.text) {
						case '删除':
							_this.messagesList.splice(index, 1);
							uni.setStorage({
								key: config.Global.cache + '_To_' + userProvider.userAccount + '_Recently',
								data: _this.messagesList
							});
							this.$store.state.wschat.recentlys = _this.messagesList;
							break;
						case '已读':
							if (item.friendId != '' && item.count > 0) {
								item.count = 0;
								try {
									const token = uni.getStorageSync(config.Global.cache + '_Token');
									if (token) {
										const msg = JSON.stringify({
											method: "UpdateReadMessage",
											token: token,
											formUserId: item.friendId
										});
										helper.sendSocketMessage(msg);
									}
								} catch (e) {}
							}
							this.$store.state.wschat.recentlys = _this.messagesList
							uni.setStorage({
								key: config.Global.cache + '_To_' + userProvider.userAccount + '_Recently',
								data: _this.messagesList
							});
							break;
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			getSize() {
				setTimeout(() => {
					uni.createSelectorQuery().in(this).select(`#${this.elId}`).boundingClientRect().exec((ret) => {
						try {
							this.btnGroupWidth = ret[0].width;
						} catch (e) {}
					});
				}, 150)
			},
			touchStart(event) {
				if (event.currentTarget.dataset.disabled === true) {
					return;
				}
				this.startX = event.touches[0].pageX;
				this.startY = event.touches[0].pageY;
			},
			touchMove(event) {
				if (this.direction === 'Y' || event.currentTarget.dataset.disabled === true) {
					this.direction = '';
					return;
				}
				var moveY = event.touches[0].pageY - this.startY,
					moveX = event.touches[0].pageX - this.startX;
				if (!this.isMoving && Math.abs(moveY) > Math.abs(moveX) || Math.abs(moveY) > 100 || Math.abs(moveX) < 50) { //纵向滑动//参数100与50可调节侧滑灵敏度
					this.direction = 'Y';
					return;
				}
				this.direction = moveX > 0 ? 'right' : 'left';
				this.messageIndex = moveX < 0 ? event.currentTarget.dataset.index : -1;
				this.isMoving = true;
			},
			touchEnd(event) {
				this.isMoving = false;
				if (this.direction !== 'right' && this.direction !== 'left') {
					this.direction = '';
					return;
				}
				if (this.direction == 'right') {
					this.messageIndex = -1;
				}
				this.endMove(event)
			},
			endMove(event) {
				if (this.direction === 'Y' || event.currentTarget.dataset.disabled === true) {
					this.direction = '';
					return;
				}
				if (this.messageIndex !== -1) {
					this.transformX = `translateX(${-this.btnGroupWidth}px)`;
					this.$emit('opened');
				} else {
					this.transformX = 'translateX(0px)';
					this.$emit('closed');
				}
				this.direction = '';
			}
		}
	}
</script>

<style lang="scss">
	.uni-swipe-action {
		width: 100%;
		overflow: hidden;

		&__container {
			background-color: #FFFFFF;
			width: 200%;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			transition: transform 350ms cubic-bezier(.165, .84, .44, 1);
		}

		&__content {
			width: 50%;
		}

		&__btn-group {
			display: flex;
			flex-direction: row;
		}

		&--btn {
			padding: 0 32upx;
			color: #FFFFFF;
			background-color: #C7C6CD;
			font-size: 28upx;
			display: inline-flex;
			text-align: center;
			flex-direction: row;
			align-items: center;
		}

		&:last-child {
			.item {
				border-bottom: none;

				&::after {
					height: 0upx;
				}
			}
		}
	}

	.item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		// padding: 16upx 0;
		height: 128upx;
		align-items: center;
		background-color: #fff;
		// border-bottom: 1px solid #E6E6E6;
		position: relative;
		margin-left: 28upx;
		margin-right: 28upx;
		border-bottom: 0.5px solid #E3E3E5;

		&::after {
			content: "";
			position: absolute;
			z-index: 3;
			right: 30upx;
			bottom: 0;
			left: 28rpx;
			height: 1px;
			-webkit-transform: scaleY(.5);
			transform: scaleY(.5);
			background-color: #c8c7cc;
		}

		.item-left {
			display: flex;
			align-items: center;
		}

		&.stick {
			background-color: rgba(243, 236, 221, .5);
		}

		.item-middle {
			display: flex;
			flex: 1;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: flex-start;
			margin-left: 20upx;
			overflow: hidden;

			.title {
				width: 100%;
				color: #000;
				font-family: "微软雅黑";
				font-weight: 400;
				font-size: 28upx;
				height: 50upx;
				line-height: 50upx;
				overflow: hidden;
				/*自动隐藏文字*/
				text-overflow: ellipsis;
				/*文字隐藏后添加省略号*/
				white-space: nowrap;
				/**强制不换行*/
				color: #3A3A3A;
			}

			.message {
				width: 100%;
				font-family: "微软雅黑";
				color: #9A9A9A;
				height: 40upx;
				line-height: 40upx;
				font-size: 24upx;
				overflow: hidden;
				/**自动隐藏文字*/
				text-overflow: ellipsis;
				/**文字隐藏后添加省略号*/
				white-space: nowrap;
				/**强制不换行*/
			}
		}

		.item-right {
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: flex-end;

			.time {
				color: #808080;
				font-size: 26upx;
				height: 60upx;
				line-height: 60upx;
			}

			.mark {
				background-color: #FE5146;
				line-height: 35upx;
				text-align: center;
				font-size: 18upx;
				min-width: 35upx;
				min-height: 35upx;
				border-radius: 18upx;
				color: #fff;
				margin-left: 70upx;
			}
		}

		.height-50 {
			height: 50rpx;
		}
	}
</style>
